<template>
	<template v-if="layoutOpts">
		<template v-if="layoutOpts.parentLayout == 'FLEX'">
			<template v-if="noRoot">
				<slot :slotStyle="slotStyle" :slotClass="slotClass"></slot>
			</template>
			<div
				v-else
				v-show="visible"
				:style="layout.colStyle"
				class="app-col app-col--flex"
			>
				<slot :slotStyle="slotStyle" :slotClass="slotClass"></slot>
			</div>
		</template>
		<a-col
			v-else
			v-show="visible"
			:lg="layout.colGridOpts.lg"
			:xs="layout.colGridOpts.md"
			:md="layout.colGridOpts.md"
			:sm="layout.colGridOpts.sm"
			class="app-col app-col--grid"
		>
			<slot :slotStyle="slotStyle" :slotClass="slotClass"></slot>
		</a-col>
	</template>
	<template v-else>
		<template v-if="noRoot">
			<slot :slotStyle="slotStyle" :slotClass="slotClass"></slot>
		</template>
		<div v-else class="app-col">
			<slot :slotStyle="slotStyle" :slotClass="slotClass"></slot>
		</div>
	</template>
</template>
<script setup lang="ts">
import { useLayout } from '@/hooks/use-app';
import { colProps } from './col';
const props = defineProps(colProps);

// 使用布局逻辑获得响应式的layout对象
let layout: any = null;
if (props.layoutOpts) {
	layout = useLayout(toRef(props as any, 'layoutOpts'));
}

// 插槽类名和插槽样式，只有不绘制根元素的时候需要传递给插槽
// 在template里写会丢失响应性，故封一个计算属性。
const attrs = useAttrs();
let slotStyle = computed(() => {
	// 有根元素无需传样式给插槽
	if (!props.noRoot) {
		return {};
	}
	let result = {};
	if (layout?.value?.colStyle) {
		Object.assign(result, layout.value.colStyle);
	}
	if (props.layoutOpts?.selfLayout === 'FLEX' && layout?.value?.rowStyle) {
		Object.assign(result, layout.value.rowStyle);
	}
	if (!props.visible) {
		Object.assign(result, { display: 'none' });
	}
	if (attrs.style) {
		Object.assign(result, attrs.style);
	}
	return result;
});
// 插槽类名
let slotClass = computed(() => {
	// 有根元素无需传类名给插槽
	if (!props.noRoot) {
		return '';
	}
	let result = 'app-col';
	if (attrs.class) {
		result = result + ' ' + attrs.class;
	}
	if (props.layoutOpts?.parentLayout == 'FLEX') {
		result += ' app-col--flex';
	}
	return result;
});
</script>
